<template>
  <div class="app-container">
    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />

    <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />

  </div>
</template>

<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import { batchEmployee } from '@/api/employee'
import { formatExcelDate } from '@/utils/index'
export default {
  name: 'UploadExcel',
  components: { UploadExcelComponent },
  data() {
    return {

    }
  },
  methods: {
    // 上传之前校验方法
    beforeUpload(file) {
      // 校验文件大小
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        // 校验通过返回true
        return true
      }

      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      // 校验不通过返回false
      return false
    },
    // 表格上传成功之后的回调方法
    async handleSuccess({ results, header }) {
      // 可以获取到 表头数组tableHeader
      // 还有表格数组tableData
      // 中英文对照关系
      const headerRelation = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '工号': 'workNumber',
        '聘用形式': 'formOfEmployment',
        '部门': 'departmentName'
      }
      // 将解析出来的 excel 数据中的表体数据的的 key 换成英文
      const data = this.getImportData(results, headerRelation)
      // 调用接口
      await batchEmployee(data)
      // 提示用户
      this.$message.success('批量导入成功')
      this.$router.back()
    },
    // 转换数组中的每一项的对象的 key 值的方法
    getImportData(arr, headerRelation) {
      const resArr = []
      // 将所有的中文 key 转换成英文 key，然后添加到新数组中
      arr.forEach(item => {
        const obj = {}
        Object.keys(item).forEach(key => {
          if (headerRelation[key] === 'timeOfEntry' || headerRelation[key] === 'correctionTime') {
            obj[headerRelation[key]] = formatExcelDate(item[key], '-')
          } else {
            obj[headerRelation[key]] = item[key]
          }
        })
        resArr.push(obj)
      })
      return resArr
    }
  }
}
</script>
